<!-- @format -->

<template>
	<div>
		<el-row>
			<el-col>
				<el-form-item :label="$tt('label_pms_supply')">
					<!-- <el-select v-model="formValue.supplyId" :placeholder="$tt('tip_please_select')" style="width: 100%;">
            <el-option v-for="item,index in supplyArr"  :key="index" :label="item.supplierName" :value="item.id">
            </el-option>
          </el-select> -->
					<ex_select_auto v-model="formValue.supplyId" style="width: 100%;" url="/srm-api/supplier/SupplierRpc/selectLimit.json"
           :option="{ label: 'supplierName', value: 'id' }" @changeItem="(e) => (formValue.supplyName = e ? e.supplierName : null)" />
				</el-form-item>
			</el-col>
		</el-row>

		<el-row>
			<el-col>
				<el-form-item :label="$tt('label_service_type')">
					<!-- <el-select v-model="formValue.apiServiceTypeCode" :placeholder="$tt('tip_please_select')" style="width: 100%;">
						<el-option v-for="item in serviceArr" :key="item.serviceCode" :label="item.serviceName" :value="item.serviceCode">
							<span style="float: left">{{ item.serviceName }}</span>
							<span style="float: right; color: #8492a6; font-size: 13px">{{ item.serviceType }}</span>
						</el-option>
					</el-select> -->
          <ex_select_auto v-model="formValue.apiServiceTypeCode" style="width: 100%;" url="/srm-api/supplier/ApiPlatformServiceRpc/getAllPaltforms.json"
           :option="{ label: 'serviceName', value: 'serviceCode' }" 
           :listHandler="apiServiceTypeHandler"
           @changeItem="(e) => (formValue.apiServiceTypeName = e ? e.serviceName : null)" 
           :renderSlotItems="renderApiServiceType"
           />
				</el-form-item>
			</el-col>
		</el-row>

		<el-row>
			<el-col>
				<el-form-item :label="$tt('label_api_service_channel')">
          <ex_select_auto v-model="formValue.apiServiceId" style="width: 100%;" url="/srm-api/supplier/ApiServiceRpc/getApiServiceDict.json"
           :option="{ label: 'apiConfigName', value: 'apiServiceId' }"  
           @focus="_focus"
           :dependentId="formValue.apiServiceTypeCode" 
           :urlParams="()=>({'apiServiceCode':formValue.apiServiceTypeCode})"
           :urlControlFun ="urlControlFunService"
           @changeItem="(e) => (formValue.apiServiceName = e ? e.apiConfigName : null)" 
           />
				</el-form-item>
			</el-col>
		</el-row>
	</div>
</template>

<script>

export default {
	data() {
		return {
			formValue: {
				/**
				 * 供应商id
				 */
				supplyId: '',
				/**
				 * 供应商名称
				 */
				supplyName: '',
				/**
				 * 所属平台接口类型code
				 */
				apiServiceTypeCode: '',
				/**
				 * 所属平台接口类型name
				 */
				apiServiceTypeName: '',
				/**
				 * 接口对接服务id
				 */
				apiServiceId: '',
				/**
				 * 接口对接服务name
				 */
				apiServiceName: '',
			},

			// supplyArr: [],
			// supplyCache: {},

			// serviceArr: [],
			// serviceCache: {},

			// apiServices: [],
			// apiServiceCache: {},

			// changeTime: 1,
		};
	},

	props: {
		type: {
			type: String,
			default: '',
		},
	},
	// watch: {
	// 	'formValue.apiServiceTypeCode'(val, old) {
	// 		let _this = this;

	// 		// _this.formValue.apiServiceId = ''
	// 		_this.apiServices = [];

	// 		this.$ajax({
	// 			url: '/srm-api/supplier/ApiServiceRpc/getApiServiceDict.json',
	// 			data: {
	// 				apiServiceCode: val,
	// 			},
	// 			success: (res) => {
	// 				if (res && res.data && res.data.rows) {
	// 					_this.apiServices = res.data.rows;
	// 					// if(!_this.inputValue.apiServiceId){
	// 					//
	// 					// }
	// 					if (_this.changeTime > 1) {
	// 						_this.formValue.apiServiceId = '';
	// 					}

	// 					_this.apiServices.forEach((e) => {
	// 						_this.apiServiceCache[e.apiServiceId] = e.apiConfigName;
	// 					});
	// 				}

	// 				_this.changeTime = _this.changeTime + 1;
	// 			},
	// 		});
	// 	},
	// },

	created() {
		// let _this = this;
		// this.$ajax({
		// 	url: '/srm-api/supplier/ApiPlatformServiceRpc/getAllPaltforms.json',
		// 	success: (res) => {
		// 		if (res && res.data && res.data.rows) {
		// 			let serviceArr = [];
		// 			res.data.rows.forEach((e) => {
		// 				e.children = e.children.filter((kk) => kk.serviceTypeCode == _this.type);

		// 				serviceArr = serviceArr.concat(e.children);
		// 			});

		// 			_this.serviceArr = serviceArr;

		// 			_this.serviceArr.forEach((e) => {
		// 				_this.serviceCache[e.serviceCode] = e.serviceName;
		// 			});
		// 		} else {
		// 			this.$message.error(this.$tt('tip_data_load_fail'));
		// 		}
		// 	},
		// });

		// this.$ajax({
		// 	url: '/srm-api/supplier/SupplierRpc/selectLimit.json',
		// 	success: (res) => {
		// 		if (res && res.data && res.data.rows) {
		// 			_this.supplyArr = res.data.rows;

		// 			_this.supplyArr.forEach((e) => {
		// 				_this.supplyCache[e.id] = e.supplierName;
		// 			});
		// 		} else {
		// 			this.$message.error(this.$tt('tip_data_load_fail'));
		// 		}
		// 	},
		// });
	},

	mounted() {},

	methods: {
		updateForm(formValue) {
			if (formValue) {
				this.formValue = formValue;
			}
		},
    apiServiceTypeHandler(e){
      return _.flatMap(e,t=>_.isEmpty(t.children)?[] : t.children.filter((k) => k.serviceTypeCode == this.type))
    },
    renderApiServiceType(h,it,i,item){
      return [
        h("span",{style:"float: left"},[it.serviceName]),
        h("span",{style:"float: right; color: #8492a6; font-size: 13px"},[it.serviceType])
      // (<span style="float: right; color: #8492a6; font-size: 13px">{ item.serviceType }</span>)
      ]
    },
    _focus() {
      if (!this.formValue.apiServiceTypeCode) {
          this.$message.warning(this.$t('tip_please_select_any',{any:this.$t('label_service_type')}))
      }
    },
    urlControlFunService(params){
      if (params.apiServiceCode) {
        return true
      } else {
        return {
          netStop: true,
          focusInnerData: [],
        }
      }
    },
		getFormData() {
			// _this.formValue.supplyName = _this.supplyCache[_this.formValue.supplyId]
			// _this.formValue.apiServiceTypeName = _this.serviceCache[_this.formValue.apiServiceTypeCode]
			// _this.formValue.apiServiceName = _this.apiServiceCache[_this.formValue.apiServiceId]

			return this.formValue;
		},
	},
};
</script>
<style></style>
